<template>
    <div class=''>
     注册页面

     <van-form @submit="onSubmit">
    <!-- 账户 -->
  <van-field
    v-model="username"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' },
    {pattern: patternUsername,message:'用户名在2-10位'}
    ]"
  />
  <!-- 密码 -->
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[
    { required: true, message: '请填写密码' },
     {pattern: patternPassword,message:'密码长度在6-12位'}
    ]"
  />
  
  <!--确认密码 -->
  <van-field
    v-model="repassword"
    type="password"
    name="密码"
    label="确认密码"
    placeholder="密码"
    :rules="[
    { required: true, message: '请填写密码' },
    {Validator:(val)=>{return val===this.password},message:'两次密码不一致'}
    ]"
  />
  <!-- 手机 -->
  <van-field
    v-model="phone"
    name="用户名"
    label="手机"
    placeholder="手机"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <!-- 邮箱 -->
   <van-field
    v-model="email"
    name="用户名"
    label="邮箱"
    placeholder="邮箱"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <!-- 手机验证码 -->
   <van-field
  v-model="sms"
  center
  clearable
  label="短信验证码"
  placeholder="请输入短信验证码"
>
  <template #button>
    <van-button size="small" :disabled='disabled' @click="sendCode" type="primary">{{
       disabled?`倒计时${cont}`:'发送验证码'
        }}</van-button>
  </template>
</van-field>
<div style="margin: 16px;">
     <van-button round  type="info" @click="$router.push('/user/login')">去登陆</van-button>
    <van-button round  type="info" native-type="submit">提交</van-button>
  </div>
</van-form>
 </div>
</template>

<script>
export default {
    data() {
        return {
      username: '',
      password: '',
      sms:'',
      repassword:'',
      phone:'',
      email:'',
      cont:60,
      disabled:false,
      //正则
      patternUsername:/^[a-zA-Z0-9]{2,10}$/,
      patternPassword:/^[a-zA-Z0-9]{4,12}$/,
 };
    },
   created() {},
    methods: {
      onSubmit(values) {
      console.log('submit', values);
    },
    sendCode(){
        //1判断手机号
        //2合法请求接口
        //3.禁用按钮
        this.disabled=true
        //开启定时器
        var time=setInterval(() => {
            this.cont--
            if(this.cont<=0){
                clearInterval(time)
                this.disabled=false
            }
        }, 1000);
    }
 },
    components:{}
};
</script>

<style lang='scss' scoped>

</style>
